<template>
  <section class="container">
    <div>
      <!-- <img class="home" src="../assets/img/timg.jpg" alt=""> -->
      <button @click="hoverMessage">Message</button>
      <section>
        <nuxt-link :to="{name:'home-id',params:{ id: 1 }}">home</nuxt-link>
      </section>
      <section>
        <nuxt-link :to="{name:'home',query:{ name: 'hello world' }}">about</nuxt-link>
      </section>
      <div style="margin-top: 20px">
        <a href="/home/1">test</a>
      </div>
    </div>
  </section>
</template>

<script>
import { mapActions } from "vuex";

export default {
  data() {
    return {
      sitesList: ""
    };
  },
  head() {
    return {
      title: "分站列表",
      meta: [
        {
          name: "keywords",
          content: "主站,北京"
        }
      ]
    };
  },
  async asyncData({ store }) {
    return {
      sitesList: await store.dispatch("getSites").catch(error => {
        console.log(error);
      })
    };
  },
  methods: {
    ...mapActions(["setNewTitle"]),
    getNewTitle() {
      this.setNewTitle("学格科技");
    },
    hoverMessage() {
      this.$notify({
        title: '提示',
        message: '这条信息'
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
$align-style = center;

p-style(v) {
  p {
    font-size: v;
    margin-bottom: 5px;
  }
}

.container {
  .title {
    text-align: $align-style;
  }

  p-style(14px);

  .home {
    width: 100%;
  }
}
</style>
